<template>
  <div>
    <span class="left">
      <input
        type="checkbox"
        @change="allcheck"
        :checked="doneLength === allLength && allLength !== 0"
      />
      已完成{{ doneLength }}/全部{{ allLength }}
    </span>
    <button class="right" @click="alldelete">清除已完成</button>
  </div>
</template>

<script>
export default {
  name: "todo-footer",
  props: ["doneLength", "allLength", "allCheckTodo", "deleteAllTodo"],
  methods: {
    //全选按钮
    allcheck(event) {
      //执行父组件的全选/全不选方法
      this.allCheckTodo(event.target.checked);
    },
    //删除已完成
    alldelete() {
      this.deleteAllTodo();
    },
  },
};
</script>

<style scoped>
.left {
  float: left;
}
.right {
  float: right;
}
div {
  overflow: hidden;
  margin-top: 10px;
}
</style>